<template>
  <view>
    <view class="form-view">
      <view class="form-item form-pa20 clearfix">
        <view class="float_left form-label">
          选择客户
          <text class="icon-requird">*</text>
        </view>
        <view
          class="float_right form-value"
          @click="goPage('/pagesT/customer/selCustomer?source=1')"
        >
          <text class="input-pl" v-if="!customerName">请选择</text>
          <text v-else>{{ customerName }}</text>
          <i class="ibonfont ibonjinru icon-jinru"></i>
        </view>
      </view>
      <view class="form-item form-pa20 clearfix b20">
        <view class="float_left form-label">
          商品
          <text class="icon-requird">*</text>
        </view>
        <view class="float_right form-value" @click="selGoods">
          <text class="input-pl">点击选择商品</text>
          <i class="ibonfont ibonjinru icon-jinru"></i>
        </view>
      </view>
      <view class="goods-ul">
        <view
          class="goods-item"
          v-for="(item, index) in goods_list"
          :key="index"
        >
          <view class="clearfix goods-goods">
            <view class="float_left goods-img"
              ><image :src="item.images[0]" mode="aspectFill"></image
            ></view>
            <view class="float_left goods-cont-right">
              <view class="goods-tit">{{ item.goodsName }}</view>
              <view class="goods-info">
                <text class="gi-label">编号：</text>
                <text class="gi-value">{{ item.goodsCode }}</text>
              </view>
              <view class="del-view" @click="delData(index)"
                ><i class="ibonfont ibonshanchu"></i
              ></view>
            </view>
          </view>

          <view class="form-item form-pa20 b20 clearfix">
            <view class="float_left form-label">规格</view>
            <view class="float_right form-value"
              >{{ item.unitName }}{{ item.specGropName }}</view
            >
          </view>
          <view class="form-item form-pa20 clearfix">
            <view class="float_left form-label">原价（元）</view>
            <view class="float_right form-value">{{ item.nowPrice }}</view>
          </view>
          <view class="form-up">
            <view class="form-label">
              调整价格（元）
              <text class="icon-requird">*</text>
            </view>
            <view class="form-value">
              <radio-group
                @change="radioChange($event, index)"
                class="radio-view"
              >
                <label
                  class="uni-list-cell"
                  v-for="(itemF, indexF) in fu_options"
                  :key="indexF"
                >
                  <span
                    ><radio
                      :value="itemF.value"
                      :checked="itemF.value === item.salePrice[0].adjPricetag"
                  /></span>
                  <text>{{ itemF.label }}</text>
                </label>
              </radio-group>
              <input
                type="digit"
                placeholder="请输入价格"
                placeholder-class="input-pl"
                class="price-input"
                v-model="item.salePrice[0].adjPricetag"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="fixed-bottom"
      ><view class="sub-btn" @click="checkSub">保存</view></view
    >
  </view>
</template>

<script>
export default {
  data() {
    return {
      user_name: uni.getStorageSync("user_name") || "",
      customerName: "",
      customerId: "",
      goods_list: [],
      customerData: "",
      goodsData: "",
      fu_options: [
        {
          label: "-",
          value: "1",
        },
        {
          label: "+",
          value: "2",
        },
      ],
    };
  },
  onLoad(options) {
    // 表单验证
    if (this.$refs.form) {
      this.$nextTick(() => {
        this.$refs.form.setRules(this.rules);
      });
    }

    if (!options.id) {
      uni.setNavigationBarTitle({
        title: "新增客户调价单",
      });
    } else {
      uni.setNavigationBarTitle({
        title: "修改客户调价单",
      });
    }
  },
  onShow() {
    if (this.customerData) {
      this.customerId = this.customerData.id;
      this.customerName = this.customerData.name;
      this.shopId = this.customerData.shopId;
      console.log(this.shopId);
    }
    if (this.goodsData) {
      const goods = this.goodsData.map((item) => {
        let specGropName = "";
        if (item.nowSkuData.specGroup) {
          specGropName = item.nowSkuData.specGroup
            .map((itemU) => {
              return itemU.specValueName;
            })
            .join(";");
        }

        return {
          images: item.images,
          createUserName: this.user_name,
          goodsName: item.title,
          goodsId: item.id,
          goodsCode: item.code,
          nowPrice: item.nowSkuData.salePrice,
          shopId: item.shopId,
          shopName: item.shopName,
          skuId: item.skuId,
          unitName: item.nowSkuData.unitName,
          specGropName: specGropName,
          salePrice: [
            {
              price: item.nowSkuData.salePrice,
              skuId: item.skuId,
              unitName: specGropName || item.nowSkuData.unitName,
              adjPricetag: "1",
            },
          ],
          customerName: this.customerName,
          customerId: this.customerId,
        };
      });
      if (!this.goods_list.length) {
        this.goods_list = goods;
      } else {
        this.goods_list = this.$utils.unique(this.goods_list.concat(goods), [
          "id",
          "skuId",
        ]);
      }
    }
  },
  methods: {
    radioChange(e, index) {
      // console.log(e.detail.value);
      //   const target = this.$utils.deepClone(this.goods_list);
      const target = JSON.parse(JSON.stringify(this.goods_list));
      target[index].salePrice[0].adjPricetag = e.detail.value;
      this.goods_list = target;
    },
    selGoods() {
      if (!this.customerId) {
        this.$u.toast("请选择客户");
        return;
      }
      this.goPage("/pagesT/goods/selGoods?shopId=" + this.shopId);
      //   this.goPage(
      //     `/components/goods/goodsDataList?shopId=${this.shopId}&source=2`
      //   );
    },
    checkSub() {
      if (!this.goods_list.length) {
        this.$u.toast("请选择需要调价的商品！");
        return;
      }
      let isLadderPrice = true;
      for (let i in this.goods_list) {
        let item = this.goods_list[i];
        for (let p in item.skuData) {
          let itemP = item.skuData[p];
          if (!itemP.adjPrice) {
            isLadderPrice = false;
            break;
          }
        }
      }
      if (!isLadderPrice) {
        this.$u.toast("请输入调整价格");
        return;
      }
      this.subData();
    },
    async subData() {
      let params = [];
      let newlist = [];
      newlist = JSON.parse(JSON.stringify(this.goods_list));
      newlist.forEach((item) => {
        if (item.goodsId) {
          const index = params.findIndex(
            (itemP) => itemP.goodsId === item.goodsId
          );
          if (index === -1) {
            params.push({
              createUserName: item.createUserName,
              goodsName: item.goodsName,
              goodsId: item.goodsId,
              shopId: item.shopId,
              shopName: item.shopName,
              salePrice: item.salePrice,
              customerName: item.customerName,
              customerId: item.customerId,
            });
          } else {
            params[index].salePrice.push(item.salePrice[0]);
          }
        }
      });
      if (!params.length) {
        this.$u.toast("请选择需要调价的商品！");
        return;
      }
      uni.showLoading();
      const { err, data } = await this.$u.api.CustomerPriceAdjustmentAdd(
        JSON.stringify(params)
      );
      uni.hideLoading();
      if (err) return;
      this.$u.toast("提交成功");
      uni.navigateBack();
    },
    delData(index) {
      this.goods_list.splice(index, 1);
      this.goodsData.splice(index, 1);
    },
  },
};
</script>

<style lang="scss">
$main-color: #fb5904;

.form-view {
  background: #fff;
  border-radius: 16upx;
  margin: 24upx;
  box-shadow: 0 2upx 8upx rgba(251, 89, 4, 0.06);
  padding: 10px;
}
.form-item {
  display: flex;
  align-items: center;
  padding: 24upx 0;
  &.b20 {
    border-bottom: none;
  }
  .form-label {
    width: 180upx;
    color: #222;
    font-size: 30upx;
    font-weight: 500;
    .icon-requird {
      color: $main-color;
      margin-left: 4upx;
    }
  }
  .form-value {
    flex: 1;
    color: $main-color;
    font-size: 28upx;
    display: flex;
    align-items: center;
    .input-pl {
      color: #bbb;
    }
    .icon-jinru {
      margin-left: 8upx;
      color: $main-color;
    }
  }
}
.goods-ul {
  background: #fff;
}
.goods-item {
  padding: 20upx 0;
  background: #fff;
  border-radius: 12upx;
  margin-bottom: 16upx;
  box-shadow: 0 2upx 8upx rgba(251, 89, 4, 0.08);
  .goods-goods {
    position: relative;
    display: flex;
    align-items: center;
    .goods-img {
      width: 120upx;
      height: 120upx;
      background: #f5f5f5;
      border-radius: 8upx;
      margin-right: 20upx;
      overflow: hidden;
      border: 2upx solid $main-color;
      image {
        width: 100%;
        height: 100%;
        border-radius: 8upx;
        object-fit: cover;
      }
    }
    .goods-cont-right {
      width: 370upx;
      .goods-tit {
        padding-bottom: 10upx;
        width: 370upx;
        font-size: 30upx;
        color: #222;
        font-weight: 600;
        word-break: break-all;
      }
      .goods-info {
        padding-bottom: 10upx;
        font-size: 24upx;
        color: #666;
      }
      .del-view {
        position: absolute;
        width: 50upx;
        height: 50upx;
        color: #fff;
        background: $main-color;
        border-radius: 100%;
        text-align: center;
        line-height: 50upx;
        right: 25upx;
        top: 50%;
        transform: translateY(-25upx);
        box-shadow: 0 2upx 8upx rgba(251, 89, 4, 0.15);
        .ibonshanchu {
          font-size: 26upx;
        }
      }
    }
  }
}
.ladder-price-input {
  display: inline-block;
  background: #f5f5f5;
  text-align: center;
  vertical-align: middle;
  border: 1upx solid $main-color;
  border-radius: 6upx;
  padding: 4upx 0;
  margin: 0 4upx;
  font-size: 26upx;
  color: #222;
}
.del-icon {
  color: #dd524d;
  margin-left: 10upx;
  font-size: 26upx;
  cursor: pointer;
  transition: color 0.2s;
  &:active {
    color: $main-color;
  }
}
.price-input {
  display: inline-block;
  border: 1upx solid $main-color;
  width: 300upx;
  font-size: 26upx;
  height: 60upx;
  line-height: 60upx;
  padding: 0 10upx;
  vertical-align: middle;
  color: $main-color;
  background: #fff7f1;
  border-radius: 8upx;
}
.uni-list-cell {
  padding-right: 10upx;
  .uni-radio-input-checked {
    border-color: $main-color !important;
    background: $main-color !important;
  }
}
.radio-view {
  display: inline-block;
  vertical-align: middle;
  .uni-radio-input {
    border-color: $main-color;
  }
  .uni-radio-input-checked {
    background: $main-color !important;
    border-color: $main-color !important;
  }
}
.form-label {
  color: #222;
  font-weight: 500;
}
.icon-requird {
  color: $main-color;
  margin-left: 4upx;
  font-size: 28upx;
  font-weight: bold;
}
.input-pl {
  color: #bbb;
}
.fixed-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -2upx 8upx rgba(251, 89, 4, 0.08);
  padding: 24upx 0;
  .sub-btn {
    width: 90%;
    margin: 0 auto;
    background: $main-color;
    color: #fff;
    border-radius: 48upx;
    font-size: 32upx;
    text-align: center;
    padding: 20upx 0;
    font-weight: 600;
    box-shadow: 0 4upx 16upx rgba(251, 89, 4, 0.12);
    border: none;
    transition: background 0.2s;
    &:active {
      background: #e04e00;
    }
  }
}
</style>
